<template>
	<view class="common-content">

		<scroll-view scroll-y="true" class="palne-main" :class="{ovhidden:show}">
			<image class="bg" src="../../static/order/train-bg.png" mode="aspectFit"></image>
			<view class="search">
				<view class="search-from">
					<view class="choose-travel">
						<span @click="selectApplication()">出差申请单</span>
						<view @click="selectApplication()">
							<span :class="[{'active':application.applicationId}]">{{application.applicationName}}</span>
							<image src="../../static/order/arrow.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="city">
						<view @click='selectCityOpen("start")' :class="[{'span':true,'active':application.applicationId}]">
							{{selectCity.start}}
						</view>
						<image src="../../static/order/train-turn.png" mode="aspectFit"></image>
						<view @click='selectCityOpen("end")' :class="[{'span':true,'active':application.applicationId}]">
							{{selectCity.end}}
						</view>
					</view>
					<view class="choose-travel choose-travel1">
						<span>出发时间</span>
						<view @click="open()">
							<span :class="[{'active':application.applicationId}]">{{applicationDate}}</span>
							<image src="../../static/order/arrow.png" mode="aspectFit"></image>
						</view>
					</view>
					<view @click="searchList()" class="btn" :class="[{'active-btn':application.applicationId}]">查询</view>
					<view class="history" v-if="searchTrainHistory && searchTrainHistory.length>0">
						<p>
							<span v-for="(item,index) in searchTrainHistory" :key="index"> {{item.from}} → {{item.to}}</span>
						</p>
						<view @click="clearHistory()">清除历史</view>
					</view>
				</view>
				<view class="standard">
					<h3><span></span>我的出差标准</h3>
					<view>
						<h4>火车票<span v-if="stantaders.overStandardSelfExpense">超标需自理</span></h4>
						<p>
							<span>预订席位</span>
							<span>{{handleSeates(stantaders.travelLimit)}}</span>
						</p>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-calendar  ref="calendar" :insert="false" @confirm="confirm" :showMonth='false' :startDate="startDate" />
		<citySelect ref="citySelect" @citySelect='citySelect' @open="openCity"/>
	</view>
</template>

<script>
	import citySelect from '../components/selectCity/index.vue'
	import {dataFormat2} from '@/utils/dateFun.js'
	import { getStantader } from "@/api/train.js";
	import { convertSeats } from "@/utils/dic.js";
	export default{
		components:{
			citySelect
		},
		data(){
			return{
				show:false,
				application:{
					applicationName: '请选择',
					detinationResult:[
						{placeName: '出发地'}
					],
					originResult:[
						{placeName: '目的地'}
					],
					applicationDate: '请选择'
				},
				cityType: '',
				selectCity:{
					start:'出发地',
					end: '目的地'
				},
				startDate:'',
				stantaders:{},
				searchTrainHistory:[],
				appAddress: [],
				applicationDate:"请选择"
			}
		},
		watch: {
			application: {
			deep: true,
			handler(nval, old) {
				console.log(nval,123)
				console.log(old,456)
				if (nval.applicationId != old.applicationId) {
					this.appAddress = [
						{
							name: this.cutCode(nval.data.originName),
							id: nval.data.origin,
						},
						{
							name: this.cutCode(nval.data.destinationName),
							id: nval.data.destination,
						},
						
					];
					let endCity = nval.detinationResult && nval.detinationResult[0].placeName.split(',');
					this.selectCity = {
						start:this.cutCode(nval.originResult && nval.originResult[0].placeName),
						end:this.cutCode(endCity[0])
					};
					let dateArr = nval.applicationDate.split('至') || [];
					this.applicationDate = dateArr[0];
				}
			},
			},
		},
		created(){
			this.startDate = dataFormat2()
			uni.getStorage({
				key: "searchTrainHistory",
				success: (res) => {
					console.log(res,111111);
					this.searchTrainHistory = res.data || [ ];
				},
			});
			this.getStantader();
		},
		methods:{
			handleSeates(str="") {
				let arr = str.split(',') || [];
				let target = [];
				arr.forEach(item=>{
					target.push(convertSeats(item))
				})
				return target.join('、')
			},
			openCity(open) {
				this.show = open;
			},
			open(){
				if(!this.application.applicationId){
					uni.showModal({
						title: '温馨提示',
						content: '您还未选择出差申请单，请先选择出差申请单',
						confirmText: "关闭", // 确认按钮文字  
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmColor: '#FFA900'
					})
					return
				}
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
				this.applicationDate = e.fulldate
			},
			selectApplication(){
				console.log(123)
				uni.navigateTo({
				    url: '/pages/order/applicationList',
				  });
			},
			searchList(){
				if(!this.application.applicationId){
					uni.showToast({
						title: '请选择出差申请单',
						icon: 'none',
						duration: 500
					})
					return
				}
				let currentTimes = new Date().getTime();
				let applicationDate = this.applicationDate+" 00:00:00"
				if(currentTimes>new Date(applicationDate).getTime()){
					uni.showToast({
						title: '出发日期不能小于当前时间，请重新选择',
						icon: 'none',
						duration: 500
					})
					return
				}
				let searchObj = {
					'from':this.selectCity.start,
					'to':this.selectCity.end
				}
				if(this.searchTrainHistory.length>0){
					this.searchTrainHistory.forEach(item=>{
						if(item.from !=searchObj.from || item.to != searchObj.to) {
							this.searchTrainHistory.push(searchObj)
						}
					})
				}else{
					this.searchTrainHistory.push(searchObj)
				}
				console.log(this.searchTrainHistory,333333)
				uni.setStorage({
					key: "searchTrainHistory",
					data: this.searchTrainHistory,
					success: function () {
						console.log("success");
					},
				});
				uni.navigateTo({
					url: this.getHotelListUrl(),
				});
			},
			getHotelListUrl() {
			let searchObj = {
				'from':this.selectCity.start,
				'to':this.selectCity.end
			}
			let path =
				"trainList?fromStation=" +
				searchObj.from +
				"&arriveStation=" +
				searchObj.to +
				"&travelTime=" +
				this.applicationDate +
				"&applicationId=" +
				this.application.applicationId;
			return "/pages/webViewh5/index?path=" + encodeURIComponent(path);
			},
			selectCityOpen(type){
				if(!this.application.applicationId){
					uni.showModal({
						title: '温馨提示',
						content: '您还未选择出差申请单，请先选择出差申请单',
						confirmText: "关闭", // 确认按钮文字  
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmColor: '#FFA900'
					})
					return
				}
				this.show = true;
				this.cityType = type
				this.$refs.citySelect.open(type,this.appAddress)
			},
			citySelect(item){		
				this.selectCity[this.cityType] = item.name
			},
			clearHistory(){
				this.searchTrainHistory = [];
				uni.setStorage({
					key: "searchTrainHistory",
					data: [],
					success: function () {
					console.log("success");
					},
				});
			},
			change(e) {
			},
			async getStantader() {
				const res = await getStantader();
				if (res[1] && res[1].respCode == 'FJKBP0000') {
					this.stantaders = res[1].data[0];
				}else {
					console.log(res.respMsg)
				}
			},
			cutCode(str) {
				let reg = new RegExp('市','g');
				let newStr = str.replace(reg,"");
				return newStr
			}
		}
	}
</script>

<style lang="scss">
	.common-content {
		width: 100vw;
		height: 100vh;
		&.ovhidden {
			overflow: hidden;
		}
		.palne-main{
			width: 100%;
			height: 100vh;
			overflow-y: scroll;
			position: relative;
			.active{
				color: #333333;
			}
			.bg{
				width: 100%;
				height: 677rpx;
			}
			.search{
				margin: auto;
				position: absolute;
				top: 290rpx;
				left: 0;
				right: 0;
				.search-from{
					width: 686rpx;
					//height: 590rpx;
					background: #fff;
					margin: 0 auto;
					box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.08);
					border-radius: 20px;
					padding: 32rpx;
					.choose-travel{
						height: 77rpx;
						line-height: 45rpx;
						border-bottom: 1rpx solid #e5e5e5;
						display: flex;
						justify-content: space-between;
						&.choose-travel1{
							padding:30rpx 0rpx;
							border-color:#fff;
							height:100rpx;
						}
						&>span{
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
						}
						&>view{
							color: #C4C4C4;
							span{
								margin-right: 33rpx;
							}
							image{
								width: 16rpx;
								height: 28rpx;
								position: relative;
								top:3rpx;
							}
						}
						
					}
					.city{
						height: 160rpx;
						line-height: 160rpx;
						font-size: 48rpx;
						display: flex;
						justify-content: space-between;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #C4C4C4;
						border-bottom: 1px solid #e5e5e5;
						.span {
							line-height:160rpx;
							flex:1;
							overflow: hidden;
							white-space: nowrap;
							text-overflow:ellipsis;
							text-align: center;
						}
						image{
							width: 202rpx;
							height: 65rpx;
							margin-top: 48rpx;
						}
					}
					.btn{
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						background: #FFE6B2;
						border-radius: 8rpx;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 13px;
						&.active-btn{
							background: #FFA900!important;
						}
					}
					.history{
						margin: 20rpx 0 10rpx;
						font-size: 24rpx;
						display: flex;
						&>p{
							flex: 1;
							white-space: nowrap;
							overflow-x: scroll;
							/* 隐藏滚动条 */
							scrollbar-width: none; /* firefox */
							-ms-overflow-style: none; /* IE 10+ */
							span{
								margin-right: 50rpx;
								color: #999;
							}
							&::-webkit-scrollbar {
								display: none; /* Chrome Safari */
							}
						}
						&>view{
							background: #FFFFFF;
							padding: 0 20rpx;
							color: #333333;
							line-height:2;
						}
					}
				}
				.standard{
					width: 686rpx;
					margin: 50rpx auto;
					&>h3{
						font-size: 36rpx;
						color: #333333;
						margin-bottom: 24rpx;
						span{
							display: inline-block;
							width: 6rpx;
							height: 30rpx;
							background: #D8D8D8;
							margin-right: 26rpx;
						}
					}
					&>view{
						&:last-child{
							background: #FFFFFF;
							box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.0800);
							border-radius: 20rpx;
							padding: 32rpx;
							h4{
								font-size: 32rpx;
								color: #333333;
								margin-bottom: 30rpx;
								span{
									font-size: 24rpx;
									color: #FFA900;
									border: 1px solid #FFA900;
									border-radius: 4rpx;
									padding: 0rpx 4rpx;
									margin-left: 15rpx
								};
							}
							p{
								display: flex;
								justify-content: space-between;
								line-height: 64rpx;
								span{
									font-size: 30rpx;
									&:first-child{
										color: #666666;
										width: 180rpx;
									}
									&:last-child{
										flex: 1;
										color: #333333
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.vue-ref{
		height: 70vh;
	}
</style>